<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="mytag" uri="/WEB-INF/tag/tag.tld" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<mytag:head title="魔橙区块链溯源系统" defineJs="/ncpsy/static/js/isQyLogin.js" defineCss="/ncpsy/static/css/tab-style.css" />
<link rel="shortcut icon" href="/ncpsy/static/favicon.ico" type="image/x-icon">

<style>
	*
	{
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	a, img
	{
		border: 0;
	}
	body
	{
		font: 12px/180% Arial,Lucida,Verdana, "宋体" ,Helvetica,sans-serif;
		color: #333;
		background: #fff;
	}
	/* tipfloat */
	.tipfloat
	{
		/*display: none;*/
		z-index: 999;
		position: fixed;
		_position: absolute;
		right: 0px;
		bottom: 0;
		width: 236px;
		height: 0;
		overflow: hidden;
	}
	.tipfloat .tiphead
	{
		height: 28px;
		line-height: 28px;
		overflow: hidden;
		padding: 0 5px;
	}
	.tipfloat .tiphead strong
	{
		float: left;
		color: black;
		font-size: 14px;
	}
	.tipfloat .tiphead .close
	{
		display: block;
		float: right;
		margin: 5px 0 0 0;
		width: 20px;
		height: 20px;
		overflow: hidden;
		cursor: pointer;
		background: url("/ncpsy/static/img/close.png") no-repeat;
		background-size: cover;
	}
	/* ranklist */
	.ranklist
	{
		border: solid 1px #ddd;
		padding: 10px 10px 0 10px;
	}
</style>
<body>
	<div class="layui-layout layui-layout-admin">
	  <div class="layui-header">

		  <div class="layui-logo" ><b onclick="javascript:location.href='/ncpsy';">魔橙区块链溯源系统</b></div>
	    <!-- 头部区域（可配合layui已有的水平导航） -->
<%--	    <ul class="layui-nav layui-layout-left">
	      <li class="layui-nav-item"><a href="javascript:;" class="tablink" id="userIndex" tabsrc="/ncpsy/user/index">主页</a></li>
	    </ul>--%>
	    <ul class="layui-nav layui-layout-right">
	      <li class="layui-nav-item">
	        <a href="javascript:;">
	          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
	          <span id="qymc">企业</span>
	        </a>
	        <dl class="layui-nav-child">
	          <dd><a href="">回到首页</a></dd>
	          <dd><a href="javascript:;" class="tablink" id="userSetting33" tabsrc="/ncpsy/setting">设置</a></dd>
	        </dl>
	      </li>
	      <li class="layui-nav-item"><a href="javascript:;" id="logout">退出登录</a></li>
	    </ul>
	  </div>
	  
	  <div class="layui-side layui-bg-black">
	    <div class="layui-side-scroll">
	      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
	      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
	  <%--      <li class="layui-nav-item layui-nav-itemed">
	          <a class="" href="javascript:;">农产品管理</a>
	          <dl class="layui-nav-child">
	            <dd><a href="javascript:;" class="tablink" id="productList" tabsrc="/ncpsy/product/list"><i class="layui-icon layui-icon-form"></i> 农产品列表</a></dd>
	            <dd><a href="javascript:;" class="tablink" id="productAdd" tabsrc="/ncpsy/product/add"><i class="layui-icon layui-icon-add-circle-fine"></i> 新增农产品</a></dd>
	          </dl>
	        </li>--%>

		  <li class="layui-nav-item layui-nav-itemed">
			  <dd><a href="javascript:;" class="tablink" id="userIndex"  tabsrc="/ncpsy/user/index"><i class="layui-icon layui-icon-chart"></i> 溯源仪表盘</a></dd>
		  </li>
		  <li class="layui-nav-item layui-nav-itemed">
			  <a href="javascript:;">溯源批次管理</a>
			  <dl class="layui-nav-child">
			  <dd>	 <a href="javascript:;" class="tablink" id="productList123" tabsrc="/ncpsy/goodsManagement"><i class="layui-icon layui-icon-form"></i>农产品批次列表</a>
			  </dd>
			  <dd>	  <a href="javascript:;" class="tablink" id="userSetting2" tabsrc="/ncpsy/forwardersManagement"><i class="layui-icon layui-icon-set-fill"></i>运输管理</a>
			  </dd>
			  </dl>
		  </li>

	<%--	  <li class="layui-nav-item layui-nav-itemed">
			 <a href="javascript:;" class="tablink" id="productList123" tabsrc="/ncpsy/goodsManagement"><i class="layui-icon layui-icon-form"></i>农产品批次列表</a>
		  </li>--%>
		  <li class="layui-nav-item">
			  <a href="javascript:;" class="tablink" id="qrcodeList" tabsrc="/ncpsy/qrcode/list"><i class="layui-icon layui-icon-form"></i> 二维码列表</a>
		  </li>
		<%--  <li class="layui-nav-item layui-nav-itemed">
			  <a href="javascript:;" class="tablink" id="userSetting2" tabsrc="/ncpsy/forwardersManagement"><i class="layui-icon layui-icon-set-fill"></i>运输管理</a>
		  </li>--%>
<%--		  <li class="layui-nav-item layui-nav-itemed">
			  <a href="javascript:;" class="tablink" id="userSetting22" tabsrc="/ncpsy/terminalManagement"><i class="layui-icon layui-icon-set-fill"></i>终端管理</a>
		  </li>--%>
	    <%--    <li class="layui-nav-item">
	          <a href="javascript:;">二维码管理</a>
	          <dl class="layui-nav-child">
	            <dd><a href="javascript:;" class="tablink" id="qrcodeList" tabsrc="/ncpsy/qrcode/list"><i class="layui-icon layui-icon-form"></i> 二维码列表</a></dd>
	          </dl>
	        </li>--%>
	        <li class="layui-nav-item layui-nav-itemed">
	          <a href="javascript:;">溯源管理</a>
	          <dl class="layui-nav-child">
	            <dd><a href="javascript:;" class="tablink" id="sourceList" tabsrc="/ncpsy/source/list"><i class="layui-icon layui-icon-form"></i> 溯源查询记录</a></dd>
	     <%--       <dd><a href="javascript:;" class="tablink" id="sourceChart" tabsrc="/ncpsy/source/chart"><i class="layui-icon layui-icon-chart"></i> 溯源图表</a></dd>--%>
				  <dd><a href="javascript:;" class="tablink" id="sourceList123123" tabsrc="/ncpsy/suyuanhuanTemplate"><i class="layui-icon layui-icon-form"></i> 溯源模板</a></dd>
			  </dl>
	        </li>


			  <li class="layui-nav-item layui-nav-itemed">
					  <a href="javascript:;">区块链网络</a>
				  <dl class="layui-nav-child">
					  <dd><a href="javascript:;" class="tablink" id="sourceList2" tabsrc="/ncpsy/new"><i class="layui-icon layui-icon-chart"></i>区块链运行状态</a></dd>
				  </dl>
				  <dl class="layui-nav-child">
					  <dd><a href="javascript:;" class="tablink" id="sourceList26" tabsrc="/ncpsy/newTwo"><i class="layui-icon layui-icon-chart"></i>区块链出块节点</a></dd>
				  </dl>
				  <dl class="layui-nav-child">
					  <dd><a href="javascript:;" class="tablink" id="sourceList3" tabsrc="/ncpsy/show"><i class="layui-icon layui-icon-form"></i>链上数据查询</a></dd>
				  </dl>
			  </li>
		  <li class="layui-nav-item layui-nav-itemed">
			  <a href="javascript:;" class="tablink" id="userSetting4" tabsrc="/ncpsy/setting"><i class="layui-icon layui-icon-set-fill"></i>账户信息管理</a>
		  </li>
		  <li class="layui-nav-item layui-nav-itemed">
			  <a href="javascript:;">溯源账户管理</a>
			  <dl class="layui-nav-child">
				  <dd>
					  <a href="javascript:void(0);" class="tablink" id="userSetting5"  tabsrc="/ncpsy/qyList?rId=2"><i class="layui-icon layui-icon-set-fill"></i>生产商管理</a>
				  </dd>
				  <dd>
					  <a href="javascript:void(0);" class="tablink" id="userSetting53"  tabsrc="/ncpsy/qyList?rId=3"><i class="layui-icon layui-icon-set-fill"></i>运输商管理</a>
				  </dd>
				  <dd>
					  <a href="javascript:void(0);" class="tablink" id="userSetting51"   tabsrc="/ncpsy/qyList?rId=4"><i class="layui-icon layui-icon-set-fill"></i>终端管理</a>
				  </dd>
			  </dl>

		  </li>
	      </ul>
	    </div>
	  </div>
	  
	  <div class="layui-body" style="height:100%">
	    <!-- 内容主体区域 -->
	    <div class="layui-tab" lay-filter="page" lay-allowClose="true" style="height:100%">
	    	<ul class="layui-tab-title">
	    	</ul>
	    	<div class="layui-tab-content" style="height:100%;padding:0">
	    	</div>
	    </div>
	  </div>
	  
<%--	  <div class="layui-footer" style="z-index:1000">
	    <!-- 底部固定区域 -->
	    © 苏卓可 - 底部固定区域
	  </div>--%>
	</div>
	<script>
	layui.use(['element','layer'], function(){
	  var element = layui.element;
		layer=layui.layer;
	  $("#qymc").text(localStorage.getItem("qymc"));
	  
	  //用于存放tabId的数组
	  var tabList = new Array();
	  
	  $(".tablink").on("click", function() {

		  //console.log($(this).attr("id"));
		  //console.log($(this)[0].innerText);
		  var tabId = $(this).attr("id");
		  var tabSrc = $(this).attr("tabsrc");
		  var tabTitle = $(this)[0].innerText;
		  if (tabSrc == '/ncpsy/qyList?rId=2' || tabSrc == '/ncpsy/qyList?rId=3' || tabSrc == '/ncpsy/qyList?rId=4'){
			  var rId = localStorage.getItem('rid');
			  console.log(rId)
			  if (rId != '1'){
				  layer.msg("没有权限!")
				  return;
			  }
		  }
		  //查找现在拥有的tab里有没有相同的tabId,有返回索引，没有则返回-1
		  var flag = tabList.findIndex(function(element) {
			  return element == tabId;
		  })
		  //如果上面代码没找到tab，既返回-1,则添加tab
		  if(flag < 0) {
			  tabList.push(tabId);
			  element.tabAdd("page", {
				  title: tabTitle,
				  content: "<div style='height:100%'><iframe src='" + tabSrc + "' width='100%' height='100%' frameborder='0'></iframe></div>",
				  id: tabId
			  });
		  }

		  //跳转到tab
		  element.tabChange('page', tabId);
	  });

     //------------------------------------------------------------------
	  //当删除tab页时，根据tab索引删除tabList数组的元素
	  element.on('tabDelete(page)', function(data) {
		  var index = data.index;
		  //删除索引为index的元素
		  tabList.splice(index, 1);
	  });
	  
	  $("#logout").on("click", function() {
		  localStorage.clear();
		  window.location.href = "/ncpsy/login";
	  });
	  
	  //渲染主页
	  var indexId = $("#userIndex").attr("id");
	  var indexSrc = $("#userIndex").attr("tabSrc");
	  var indexTitle = $("#userIndex")[0].innerText;
	  tabList.push(indexId);
	  element.tabAdd("page", {
		  title: indexTitle,
		  content: "<div style='height:100%'><iframe src='" + indexSrc + "' width='100%' height='100%' frameborder='0'></iframe></div>",
		  id: indexId
	  });
	  element.tabChange('page', indexId);
	});
	</script>

	<script type="text/javascript">
		$(function () {
			var titHeight = $(".tiphead").height();
			$(".tipfloat").animate({ height: '196px' }, 400).delay(3000).animate({ height: 0 }, 300, function () {
				// $('.tipfloat').hide()
			});
			$(".close").click(function () {
				$(".tipfloat").animate({ height: '0px' }, 300);
			});
			let index  = 0;
			let timer = setInterval(function () {
				getHash(index);
				$(".tipfloat").animate({ height: '196px', }, 400).delay(2000).animate({ height: 0 }, 300);
			}, 5000);
			let data = [
				{name: '苹果', hash: 'abdwwiHdfjoeiqoGfjajfwoe'},
				{name: '桃子', hash: 'abdwwiHdfjoeiqoGfjajfwoe'},
				{name: '凤梨', hash: 'abdwwiHdfjoeiqoGfjajfwoe'},
				{name: '哈密瓜', hash: 'abdwwiHdfjoeiqoGfjajfwoe'},
				{name: '橘子', hash: 'abdwwiHdfjoeiqoGfjajfwoe'},
				{name: '菠萝', hash: 'abdwwiHdfjoeiqoGfjajfwoe'},
			];
			function getHash(i) {
				if (i >= data.length) {
					clearInterval(timer);
					return false
				}
				$(".ncp-name").html(data[i].name);
				$(".ncp-hash").html(data[i].hash);
				index ++;
			}
		});


	</script>
	<div class="tipfloat" style="background:white">
		<h2 class="tiphead">
			<strong>右下角浮动提示框</strong><span title="关闭" class="close"></span>
		</h2>
		<div  class="ranklist">
			这里是弹出框框信息
			<p><span>农产品名称：</span><span class="ncp-name">苹果</span></p>
			<p><span>上链Hash：</span><span class="ncp-hash">adjfdjafljerfj</span></p>
		</div>
	</div>

</body>
</html>